<template>
    <div class="Login">
        <div class="Login_box">
            <div class="fl Login_fl">
                <h1 class="Login_title">欢迎来到<br/>易采批</h1>
                <h2 class="Login_subtitle">你身边的采购专家</h2>
            </div>
            <div class="fr Login_fr">
                <div class="Login_header">
                    <nuxt-link class="Login_header_text Login_header_cur" to="/login/">登录</nuxt-link>
                    <span class="Login_header_divide">/</span>
                    <nuxt-link class="Login_header_text" to="/register/">注册</nuxt-link>
                </div>
                <div class="Login_form">
                  <div class="Login_form_group">
                    <div class="Login_form_div">
                      <label class="Login_form_label">请输入手机号码</label>
                      <button class="Login_form_getCode fr" :data-validate="errors.has('mobile')" v-timer @click="sendSemCode">获取动态码</button>
                    </div>
                    <input
                    :class="{'Login_form_input_danger':errors.has('mobile')}"
                    v-validate="{required: true, max: 11, min: 11, regex: isMobile}"
                    class="Login_form_input"
                    v-model="mobile" name="mobile" maxlength="11" type="tel"/>
                    <p class="Login_form_tip" v-show="errors.has('mobile')">{{ errors.first('mobile') }}</p>
                  </div>
                  <div class="Login_form_group">
                    <div class="Login_form_div">
                      <label class="Login_form_label">请输入动态码</label>
                    </div>
                    <input
                    :class="{'Login_form_input_danger':errors.has('code')}"
                    v-validate="'required|max:4|min:4'"
                    maxlength="4" v-model="code"
                    type="text" name="code" class="Login_form_input"/>
                    <p class="Login_form_tip" v-show="errors.has('code')">{{ errors.first('code') }}</p>
                  </div>
                  <div class="Login_form_footer">
                    <button class="Login_form_btn" @click="doSubmit" :disabled="errors.has('mobile')||errors.has('code')">登录</button>
                    <nuxt-link class="Login_form_link fr" to="/login">手机登录</nuxt-link>
                  </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import { isMobile } from "~/utils/regx"
  import { haslogin } from "~/middleware/logincheck"
  import { sendSmsCode, loginOnSmsCode } from "~/api/"
  export default {
  middleware: haslogin,
  data() {
      return {
          isMobile,
          mobile: "",
          code: ""
      }
  },
  methods: {
      sendSemCode () {
        this.$validator.validate('mobile').then(async (result) => {
          if (!result) return
          const res = await sendSmsCode(this, 'LOGIN', this.mobile)
          if (res.code === '0') {
            this.$message.success('验证码发送成功')
          } else {
            this.$message.error(res.message)
          }
        })
      },
      doSubmit() {
        this.$validator.validateAll().then( async (result) => {
          if (!result) return
          const res = await loginOnSmsCode(this, this.mobile, this.code)
          // 登录失败
          if (res.code != '0') return this.$message.error(res.message)
          // 登录成功
          this.$store.dispatch('setLoginStatus', this.mobile)
          this.$message.success('登录成功')
          if (res.data.auditStatus === 'PASS') return this.$router.replace('/')
          if (res.data.auditStatus === 'NO_SUBMIT') return this.$router.replace('/qualified')
          if (res.data.auditStatus === 'AUDITING') return this.$router.replace('/qualified/result')
          // if (res.data.auditStatus === 'NO_PASS')
          this.$confirm(res.data.auditComment, '审核未通过', {
            confirmButtonText: '重新上传',
            cancelButtonText: '去个人中心',
            type: 'warning'
          }).then(() => {
            this.$router.replace('/qualified')
          }).catch(() => {
            this.$router.replace('/')
          })
        })
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>
